import styles from './QuestionCard.module.scss'
import {FC, useState} from "react";
import {Button, Divider, message, Modal, Popconfirm, Space, Tag} from "antd";
import {
    CopyOutlined,
    DeleteOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    LineChartOutlined,
    StarOutlined
} from "@ant-design/icons";
import {Link, useNavigate} from "react-router-dom";
import {duplicateQuestionService, updateQuestionService} from "../services/question";
import {useRequest} from "ahooks";

const {confirm} = Modal

interface PropsType {
    _id: string,
    title: string,
    isPublished: boolean,
    isStar: boolean,
    answerCount: number,
    createdAt: string
}

export const QuestionCard: FC<PropsType> = (props: PropsType) => {
    const {_id, title, createdAt, isPublished, isStar, answerCount} = props;
    const nav = useNavigate()

    const [isStarState, setIsStarState] = useState(isStar)

    const {loading: changeStarLoading, run: changeStar} = useRequest(async () => {
        await updateQuestionService(_id, {isStar: !isStarState})
    }, {
        manual: true,
        onSuccess() {
            setIsStarState(!isStarState)
            message.success('已更新').then(r => '')
        }
    })


    const {loading: duplicateLoading, run: duplicate} = useRequest(async () => {
        return await duplicateQuestionService(_id)
    }, {
        manual: true,
        onSuccess(result: any) {
            message.success('复制成功').then(r => {
            })
            nav(`/question/edit/${result.id}`)
        }
    })

    const [isDeletedState, setIsDeletedState] = useState(false)
    const {loading: deleteLoading, run: deleteQuestion} = useRequest(async () => {
        return await updateQuestionService(_id, {isDeleted: true})
    }, {
        manual: true,
        onSuccess() {
            message.success('删除成功').then(r => '')
            setIsDeletedState(true)
        }
    })

    function del() {
        confirm({
            title: '确定删除该问卷？',
            icon: <ExclamationCircleOutlined/>,
            onOk: () => {
                deleteQuestion()
            },
        })
    }


    if (isDeletedState) return null

    return (
        <div className={styles.container}>
            <div className={styles.title}>
                <div className={styles.left}>
                    <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
                        <Space>
                            {isStarState && <StarOutlined style={{color: 'red'}}/>}
                            {title}
                        </Space>
                    </Link>
                </div>
                <div className={styles.right}>
                    <Space>
                        {isPublished ? <Tag color={'processing'}>已发布</Tag> : <Tag>未发布</Tag>}
                        <span>答卷：{answerCount}</span>
                        <span>{createdAt}</span>
                    </Space>
                </div>
            </div>
            <Divider style={{margin: '12px 0'}}></Divider>
            <div className={styles['button-container']}>
                <div className={styles.left}>
                    <Space>
                        <Button icon={<EditOutlined/>} type={'text'} size={'small'} onClick={() => {
                            nav(`/question/edit/${_id}`)
                        }}>编辑问卷</Button>
                        <Button icon={<LineChartOutlined/>} type={'text'} size={'small'} onClick={() => {
                            nav(`/question/stat/${_id}`)
                        }}
                                disabled={!isPublished}
                        >问卷统计</Button>
                    </Space>
                </div>
                <div className={styles.right}>
                    <Space>
                        <Button icon={<StarOutlined/>} type={'text'}
                                size={'small'} onClick={changeStar}
                                disabled={changeStarLoading}>{isStarState ? '取消标星' : '标星'}</Button>
                        <Popconfirm
                            title={'确定复制该问卷？'}
                            okText={'确定'}
                            cancelText={'取消'}
                            onConfirm={duplicate}
                        >
                            <Button icon={<CopyOutlined/>} type={'text'} size={'small'}
                                    disabled={duplicateLoading}>复制</Button>
                        </Popconfirm>
                        <Button icon={<DeleteOutlined/>} type={'text'} size={'small'} onClick={del}
                                disabled={deleteLoading}>删除</Button>
                    </Space>
                </div>
            </div>
        </div>
    );
}